<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <style>
        .container {
            width: 50%;
            background: #f2f2f2;
            margin: 0 auto;
            padding: 20px;
        }

        .input {
            line-height: 20px;
            height: 20px;
        }

        .btn {
            line-height: 20px;
            height: 20px;
            border: 1px lightseagreen solid;
            background: lightseagreen;
            color: white;
        }
    </style>
</head>

<body>


    <div class="container">
        <input placeholder="" id="sendMsg" class="input" type="text" />
        <button id="btn_send" class="btn">连接</button>
    </div>




    <script>
        // 打开一个 web socket
        //var ws = new WebSocket("wss://www.besteasylearn.com");

        document.querySelector("#btn_send").addEventListener('click', function () {
            var url = $("#sendMsg").val();
            console.log(url, "=========url============");
            var ws = new WebSocket(url);
            ws.onopen = function () {
                // Web Socket 已连接上，使用 send() 方法发送数据
                console.log("连接成功", "onopen");
            };

            ws.onmessage = function (evt) {
                var received_msg = evt.data;
                console.log("数据已接收...");
            };

            ws.onclose = function () {
                // 关闭 websocket
                console.log("连接已关闭...");
            };
        });



    </script>
</body>

</html>